<?php
/**
 * @link https://ym2.cleverstone.top
 * @copyright Copyright (c) 2020 Yii Manager Software LLC
 */

use builder\helper\H5;
use yii\helpers\Json;

/* ===================== 动态控件项模板 ===================== */

/** @var \yii\web\View $this View实例 */
/** @var array $controlOptions 控件配置项 */
/** @var string $requiredStyle 必填风格 */
?>
<div class="form-group col-md-<?= $controlOptions['layout'] ?> <?= $controlOptions['class'] ?>"
     style="<?= $controlOptions['style'] ?>"<?= $controlOptions['attribute'] ?>>
    <!--标签-->
    <?php if (!empty($controlOptions['label'])): ?>

        <label class="mb-1 label-color ym2-form-label">
            <?= $controlOptions['label'] ?>

            <comment class="layui-font-gray pl-1 f12"><?= $controlOptions['comment'] ?></comment>
        </label>
    <?php endif; ?>

    <!--表格-->
    <div class="w-100 overflow-auto">
        <table class="layui-table"<?= $controlOptions['skinAttribute'] ?>>
            <thead>
            <tr>
                <th></th>
                <?php foreach ($controlOptions['items'] as $field => $control): ?>

                    <th style="min-width:<?= !empty($control['minWidth']) ? $control['minWidth'] : $controlOptions['cellMinWidth'] ?>">
                        <?php if (!empty($control['required']) && $requiredStyle == 'mark'): ?>

                            <sup class="layui-font-red">*</sup>
                        <?php endif; ?>
                        <?= !empty($control['label']) ? $control['label'] : '-' ?>
                        <?php if (empty($control['required']) && $requiredStyle == 'text'): ?>

                            <span class="layui-font-gray f12">[ 选填 ]</span>
                        <?php endif; ?>
                        <?php if (!empty($control['comment'])): ?>

                            <comment class="f12 font-weight-lighter layui-font-red d-block"><?= $control['comment'] ?></comment>
                        <?php endif; ?>

                    </th>
                <?php endforeach; ?>

            </tr>
            </thead>
            <tbody id="<?= $controlOptions['__id'] //用于拖拽 ?>">
            <tr class="drag-item" ng-repeat="(index, contentItem) in <?= $controlOptions['__scope'] ?> track by $index">
                <td>
                    <div class="btn-group">
                        <button ng-if="contentItem.__allowDragSorting" type="button" class="drag-handle layui-btn layui-btn-xs layui-btn-primary" style="cursor:move;">
                            <span class="bi bi-list f15"></span>
                        </button>
                        <button ng-if="contentItem.__allowDefaultDrop" type="button" class="layui-btn layui-btn-xs layui-btn-danger" ng-click="actionDeleteDynamicControl('<?= $controlOptions["__id"] ?>', index)">
                            <span class="bi bi-x f15"></span>
                        </button>
                    </div>
                </td>

                <?php foreach ($controlOptions['items'] as $field => $control): ?>
                    <td class="<?= !empty($control['class']) ? $control['class'] : '' ?>" style="<?= !empty($control['style']) ? $control['style'] : '' ?>">
                        <?php switch ($control['control']): case 'text': // 文本 ?>

                            <!--text-->
                            <input type="text"
                                   ng-model="contentItem['<?= $field ?>']"
                                   autocomplete="off"
                                   placeholder="<?= $control['placeholder'] ?>"
                                   title="<?= $control['placeholder'] ?>"
                                   class="ym2-form-control layui-input layui-input-sm"<?= $control['attribute'] ?>>

                            <?php break; case 'datetime': //datetime/date/year/month/time ?>
                        <?php case 'date': //datetime/date/year/month/time ?>
                        <?php case 'year': //datetime/date/year/month/time ?>
                        <?php case 'month': //datetime/date/year/month/time ?>
                        <?php case 'time': //datetime/date/year/month/time ?>

                            <!--datetime/date/year/month/time-->
                            <input type="text"
                                   ng-model="contentItem['<?= $field ?>']"
                                   ym2-laydate
                                   ym2-range="<?= $control['range'] ?>"
                                   ym2-type="<?= $control['control'] ?>"
                                   placeholder="<?= $control['placeholder'] ?>"
                                   class="ym2-form-control layui-input layui-input-sm"
                                   title="<?= $control['placeholder'] ?>"
                                   autocomplete="off"
                                   readonly="readonly"<?= $control['attribute'] ?>>

                            <?php break; case 'select': // select ?>

                            <!--select/select multiple-->
                            <select ng-model="contentItem['<?= $field ?>']"
                                    ui-select2="<?= H5::encode(Json::encode($control['uiConfig'])) ?>"
                                    class="ym2-form-control invisible"
                                    data-placeholder="<?= $control['placeholder'] ?>"
                                    title="<?= $control['placeholder'] ?>"<?= !empty($control['multiple']) ? ' multiple' : '' ?><?= $control['attribute'] ?>>

                                <?php if (empty($control['multiple'])): ?>

                                    <option value=""></option>
                                <?php endif; ?>

                                <?php foreach ($control['options'] as $value => $text): ?>
                                    <?php if (is_array($text)): ?>

                                        <optgroup label="<?= $value ?>">
                                            <?php foreach ($text as $vv => $vTxt): ?>

                                                <option <?= in_array($vv, $control['disabled']) ? 'disabled' : '' ?> value="<?= $vv ?>">
                                                    <?= $vTxt ?>
                                                </option>
                                            <?php endforeach; ?>

                                        </optgroup>
                                    <?php else: ?>

                                        <option <?= in_array($value, $control['disabled']) ? 'disabled' : '' ?> value="<?= $value ?>">
                                            <?= $text ?>
                                        </option>
                                    <?php endif; ?>
                                <?php endforeach; ?>

                            </select>

                            <?php break; case 'number': //number ?>

                            <!--number-->
                            <input type="number"
                                   ng-model="contentItem['<?= $field ?>']"
                                   string-to-number
                                   autocomplete="off"
                                   class="ym2-form-control layui-input layui-input-sm"
                                   title="<?= $control['placeholder'] ?>"
                                   placeholder="<?= $control['placeholder'] ?>"<?= $control['attribute'] ?>>

                            <?php break; case 'textarea': //textarea ?>

                            <!--textarea-->
                            <textarea ng-model="contentItem['<?= $field ?>']"
                                      rows="<?= $control['rows'] ?>"
                                      class="ym2-form-control layui-textarea"
                                      title="<?= $control['placeholder'] ?>"
                                      placeholder="<?= $control['placeholder'] ?>"<?= $control['attribute'] ?>></textarea>

                            <?php break; case 'checkbox': // checkbox/tag ?>

                            <!--checkbox/tag-->
                            <div class="layui-form">
                                <?php foreach ($control['options'] as $value => $text): ?>

                                    <input type="checkbox"
                                           layui-form-render
                                           lay-filter="ym2_form_checkbox"
                                           ng-model="contentItem['<?= $field ?>']['<?= $value ?>']"
                                           ng-true-value="1"
                                           ng-false-value="0"
                                           title="<?= $text ?>"<?= $control['attribute'] ?>>
                                <?php endforeach; ?>

                            </div>

                            <?php break; case 'switch': //switch ?>

                            <!--checkbox switch-->
                            <div class="layui-form">
                                <input type="checkbox"
                                       layui-form-render
                                       lay-filter="ym2_form_switch"
                                       ng-model="contentItem['<?= $field ?>']"
                                       ng-true-value="1"
                                       ng-false-value="0"
                                       title="<?= $control['title'] ?>"
                                       lay-skin="switch"<?= $control['attribute'] ?>>
                            </div>

                            <?php break; case 'password': //password ?>

                            <!--password-->
                            <input type="password"
                                   ng-model="contentItem['<?= $field ?>']"
                                   autocomplete="off"
                                   title="<?= $control['placeholder'] ?>"
                                   placeholder="<?= $control['placeholder'] ?>"
                                   class="ym2-form-control layui-input layui-input-sm"<?= $control['attribute'] ?>>

                            <?php break; case 'radio': //radio ?>

                            <!--radio-->
                            <div class="layui-form">
                                <?php foreach ($control['options'] as $value => $text): ?>

                                    <input type="radio"
                                           layui-form-render
                                           lay-filter="ym2_form_radio"
                                           ng-model="contentItem['<?= $field ?>']"
                                           value="<?= $value ?>"
                                           title="<?= $text ?>"<?= $control['attribute'] ?>>
                                <?php endforeach; ?>

                            </div>

                            <?php break; case 'range': //range ?>

                            <!--range-->
                            <input class="form-control-range cursor-pointer"
                                   string-to-number
                                   min="<?= $control['min'] ?>"
                                   max="<?= $control['max'] ?>"
                                   step="<?= $control['step'] ?>"
                                   title="{{ contentItem['<?= $field ?>'] }}"
                                   ng-model="contentItem['<?= $field ?>']"
                                   type="range"<?= $control['attribute'] ?>>
                            <comment class="layui-font-primary">
                                <?= $control['valueLabel'] ?>{{ contentItem['<?= $field ?>'] }}<?= $control['valueUnit'] ?>
                            </comment>
                            <?php break; case 'file': //文件上传 ?>

                            <!--file-->
                            <div class="card border-0">
                                <div ym2-upload="<?= H5::encode(Json::encode($control['scenario'])) ?>"
                                     ym2-style="<?= $control['style'] ?>"
                                     ym2-max="<?= $control['max'] ?>"
                                     ng-model="contentItem['<?= $field ?>']">
                                </div>
                            </div>

                            <?php break; case 'section': //控件区间 ?>

                            <!--section-->
                            <div class="input-group">
                                <input type="text"
                                       autocomplete="off"
                                       ng-model="contentItem['<?= $field ?>'][0]"
                                       placeholder="<?= current($control['placeholder']) ?>"
                                       title="<?= current($control['placeholder']) ?>"
                                       style="<?= $control['firstStyle'] ?>"
                                       class="range1 ym2-form-control layui-input layui-input-sm"<?= $control['firstAttribute'] ?>>
                                <span class="division layui-font-gray px-2">-</span>
                                <input type="text"
                                       autocomplete="off"
                                       ng-model="contentItem['<?= $field ?>'][1]"
                                       placeholder="<?= end($control['placeholder']) ?>"
                                       title="<?= end($control['placeholder']) ?>"
                                       style="<?= $control['lastStyle'] ?>"
                                       class="range2 ym2-form-control layui-input layui-input-sm"<?= $control['lastAttribute'] ?>>
                            </div>

                            <?php break; endswitch; ?>

                    </td>
                <?php endforeach; ?>

            </tr>
            </tbody>
        </table>
    </div>
    <!--按钮-->
    <div class="mt-3">
        <button type="button"
                class="layui-btn layui-btn-sm layui-btn-primary"
                ng-click="actionAddDynamicControl('<?= $controlOptions["__id"] ?>')">
            添加一行
        </button>
    </div>
</div>